<template>
	<div class="search_body" :style="bodyStyleSize">
		<input id="search_inp" v-if="inpSwith.state" />
		<draggableIcon comp="search_icon" :AtClick="Reprop.AtClick"></draggableIcon>
	</div>
</template>

<script setup>
import draggableIcon from '../draggableIcon.vue';
import { reactive, onMounted } from 'vue';

let prop = defineProps(['width', 'height', 'AtClick']);
let Reprop = reactive({ AtClick: prop.AtClick });

let inpSwith = reactive({ state: true });

let bodyStyleSize = `width: prop.width; height: prop.height;`;

onMounted(() => {
	let inpEle = document.getElementById('search_inp');
	inpEle.addEventListener('keyup', keyupHandle);
});

function inlive() {
	console.log('这里 写一些 查询代码 返回结果');
}

//keyup 组装器
function keyupHandle(event) {
	//抬起 键 为 Enter  keyCode === 13
	if (event.keyCode === 13) {
		// console.log('event KeyUp is' + event.code);
		inlive();
	}
}
prop;
</script>

<style scoped lang="scss">
.search_body {
	width: 290px;
	height: 30px;
	display: flex;
	justify-content: space-between;
}
#search_inp {
	color: #64dc2d;
	border: 0;
	border-bottom: 2px solid rgba($color: #64dc2d, $alpha: 1);
	filter: blur(0px);
	font-size: 20px;
	outline: none;

	padding: 2px 0px 2px 8px;
}
</style>
